<template>
  <div class="box1">
    <div class="title">
      <span>个人信息</span>
      <el-button type="primary"  @click="emit('save')" :loading="saving">保存</el-button>
    </div>
    <div class="content">
      <!-- 垂直布局 - 适配左侧栏 -->
      <div class="profile-vertical">
        <!-- 头像 + 基本信息卡片（保持原样式） -->
        <div class="profile-card">
          <div class="text-center">
            <userAvatar :user="userProfile" @updateAvatar="(url) => emit('updateAvatar', url)" />
          </div>

          <div class="info-item">
            <div class="label">姓名</div>
            <div class="value">{{ userProfile.nickName }}</div>
          </div>

          <slot name="student-info" :userProfile="userProfile">
            <slot name="teacher-info" :userProfile="userProfile">
              <div class="info-item">
                <div class="label">学号</div>
                <div class="value">{{ userProfile?.student?.stuId }}</div>
              </div>
              <div class="info-item">
                <div class="label">学院</div>
                <div class="value">{{ userProfile?.dept?.deptName }}</div>
              </div>
              <div class="info-item">
                <div class="label">年级</div>
                <div class="value">{{ userProfile?.student?.grade?.gradeName }}</div>
              </div>
              <div class="info-item">
                <div class="label">专业</div>
                <div class="value">{{ userProfile?.student?.major?.majorName }}</div>
              </div>
            </slot>
          </slot>
        </div>

        <!-- 联系方式区域 -->
        <div class="contact-section">
          <div class="contact-item">
            <label class="contact-label">邮箱</label>
            <el-input v-model="userProfile.email" placeholder="请输入邮箱" maxlength="50" size="large" />
          </div>
          <div class="contact-item">
            <label class="contact-label">手机号</label>
            <el-input v-model="userProfile.phonenumber" placeholder="请输入手机号" maxlength="11" size="large" />
          </div>
        </div>

        <!-- 个人简介区域 -->
        <div class="summary-section">
          <label class="summary-label">个人简介</label>
          <el-input v-model="summaryProxy" type="textarea" :rows="5" maxlength="300" placeholder="请输入个人简介" show-word-limit resize="none" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import userAvatar from '@/views/system/user/profile/userAvatar.vue'

const props = defineProps({
  userProfile: { type: Object, required: true },
  summary: { type: String, default: '' },
  saving: { type: Boolean, default: false }
})
const emit = defineEmits(['update:summary', 'save', 'updateAvatar'])

const summaryProxy = computed({
  get: () => props.summary,
  set: (val) => emit('update:summary', val)
})
</script>

<style lang="scss" scoped>
$padding: 16px;
$border-radius: 10px;
$border-color: #e5e5e5;

.box1 {
  background-color: #fff;
  border-radius: $border-radius;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 24px;
    font-weight: 600;
    color: var(--el-color-primary);
    padding: $padding;
    border-bottom: 1px solid $border-color;
    flex-shrink: 0;
  }

  .content {
    padding: $padding;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
  }
}

.profile-vertical {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

// 头像区域
.avatar-section {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 0;
}

// 头像 + 基本信息卡片（原样式）
.profile-card {
  padding: $padding;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

  .info-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #e5e5e5;

    &:last-child {
      border-bottom: none;
    }

    .label {
      font-size: 16px;
      font-weight: bold;
      color: #333;
    }

    .value {
      font-size: 16px;
      color: #666;
      margin-left: auto;
      text-align: right;
      word-break: break-all;
    }
  }
}

// 联系方式区域
.contact-section {
  display: flex;
  flex-direction: column;
  gap: 12px;

  .contact-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .contact-label {
    font-size: 13px;
    font-weight: 500;
    color: #495057;
  }
}

// 个人简介区域
.summary-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;

  .summary-label {
    font-size: 13px;
    font-weight: 500;
    color: #495057;
  }
}

// 滚动条样式
.content::-webkit-scrollbar {
  width: 4px;
}

.content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 2px;
}

.content::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 2px;

  &:hover {
    background: #a8a8a8;
  }
}
</style>

<!-- 非 scoped 样式，用于插槽内容 -->
<style lang="scss">
.box1 .profile-card .info-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #e5e5e5;

  &:last-child {
    border-bottom: none;
  }

  .label {
    font-size: 16px;
    font-weight: bold;
    color: #333;
  }

  .value {
    font-size: 16px;
    color: #666;
    margin-left: auto;
    text-align: right;
    word-break: break-all;
  }
}
</style>
